<template>
  <div class="login-container">
    <div class="login-card">
      <div class="login-header">
        <div class="login-title">传统服饰在线平台</div>
        <div class="login-subtitle">用户登录</div>
      </div>

      <!-- 登录表单 -->
      <a-form
        :model="passwordForm"
        name="password-login"
        @finish="handlePasswordLogin"
      >
        <a-form-item
          name="userAccount"
          :rules="[{ required: true, message: '请输入账号!' }]"
        >
          <a-input
            v-model:value="passwordForm.userAccount"
            placeholder="请输入账号"
            size="large"
            prefix-icon="user"
          />
        </a-form-item>

        <a-form-item
          name="userPassword"
          :rules="[{ required: true, message: '请输入密码!' }]"
        >
          <a-input-password
            v-model:value="passwordForm.userPassword"
            placeholder="请输入密码"
            size="large"
          />
        </a-form-item>

        <a-form-item>
          <a-button
            type="primary"
            html-type="submit"
            block
            size="large"
            class="login-button"
            :loading="passwordLoading"
          >
            登录
          </a-button>
        </a-form-item>
      </a-form>

      <div class="login-footer">
        <div class="register-link">
          还没有账号？
          <a @click="router.push('/register')">立即注册</a>
        </div>
      </div>

      <div class="traditional-decoration top-left"></div>
      <div class="traditional-decoration top-right"></div>
      <div class="traditional-decoration bottom-left"></div>
      <div class="traditional-decoration bottom-right"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { message } from "ant-design-vue";
import { userLoginUsingPost } from "@/api/userController";
import { useLoginUserStore } from "@/store/userStore";

const router = useRouter();
const loginUserStore = useLoginUserStore();

// 密码登录表单
const passwordForm = reactive({
  userAccount: "",
  userPassword: "",
});
const passwordLoading = ref(false);

// 密码登录处理
const handlePasswordLogin = async () => {
  try {
    passwordLoading.value = true;
    const res = await userLoginUsingPost(passwordForm);
    if (res.data.code === 0) {
      message.success("登录成功");
      // 更新用户信息并保存到 localStorage
      await loginUserStore.fetchLoginUser();
      // 跳转到首页
      router.push("/");
    } else {
      message.error("登录失败，" + res.data.message);
    }
  } catch (error) {
    message.error("登录失败，请重试");
  } finally {
    passwordLoading.value = false;
  }
};
</script>

<style scoped>
.login-container {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("@/assets/background/homeviewbackground.png") no-repeat center;
  background-size: cover;
  position: relative;
}

.login-container::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.3);
}

.login-card {
  width: 420px;
  padding: 40px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(165, 104, 60, 0.3);
  z-index: 1;
}

.login-header {
  text-align: center;
  margin-bottom: 32px;
}

.login-title {
  font-size: 28px;
  font-weight: bold;
  color: #8c4b3c;
  margin-bottom: 8px;
  font-family: "KaiTi", "楷体", serif;
}

.login-subtitle {
  font-size: 18px;
  color: #a5683c;
  font-family: "KaiTi", "楷体", serif;
}

.login-button {
  margin-top: 16px;
  height: 42px;
  background: linear-gradient(135deg, #a5683c, #8c4b3c);
  border: none;
  font-size: 16px;
  transition: all 0.3s ease;
}

.login-button:hover {
  background: linear-gradient(135deg, #8c4b3c, #a5683c);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(140, 75, 60, 0.3);
}

.login-footer {
  margin-top: 24px;
  text-align: center;
}

.register-link {
  color: #666;
  font-size: 14px;
}

.register-link a {
  color: #8c4b3c;
  cursor: pointer;
  text-decoration: none;
  font-weight: 500;
}

.register-link a:hover {
  color: #a5683c;
  text-decoration: underline;
}

:deep(.ant-input),
:deep(.ant-input-password) {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(165, 104, 60, 0.3);
  height: 42px;
  padding: 0 11px;
  font-size: 14px;
}

:deep(.ant-input-affix-wrapper) {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(165, 104, 60, 0.3);
  padding: 0 11px;
  height: 42px;
  display: flex;
  align-items: center;
}

:deep(.ant-input-affix-wrapper > input.ant-input) {
  background: transparent;
  border: none;
  box-shadow: none;
  height: 24px;
  line-height: 24px;
  padding: 0;
}

:deep(.ant-input-affix-wrapper .ant-input-suffix) {
  margin-left: 4px;
  display: flex;
  align-items: center;
}

:deep(.ant-input-password-icon) {
  color: #a5683c;
  font-size: 14px;
}

:deep(.ant-input:focus),
:deep(.ant-input-focused),
:deep(.ant-input-affix-wrapper:focus),
:deep(.ant-input-affix-wrapper-focused) {
  border-color: #a5683c;
  box-shadow: 0 0 0 2px rgba(165, 104, 60, 0.2);
}

.traditional-decoration {
  position: absolute;
  width: 40px;
  height: 40px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3,3 L8,3 L8,8 L3,8 L3,3 Z M9,3 L15,3 L15,8 L9,8 L9,3 Z M16,3 L21,3 L21,8 L16,8 L16,3 Z M3,9 L8,9 L8,15 L3,15 L3,9 Z M9,9 L15,9 L15,15 L9,15 L9,9 Z M16,9 L21,9 L21,15 L16,15 L16,9 Z M3,16 L8,16 L8,21 L3,21 L3,16 Z M9,16 L15,16 L15,21 L9,21 L9,16 Z M16,16 L21,16 L21,21 L16,21 L16,16 Z" fill="%23a5683c" opacity="0.3"/></svg>');
  opacity: 0.6;
}

.top-left {
  top: 0;
  left: 0;
  transform: rotate(0deg);
}

.top-right {
  top: 0;
  right: 0;
  transform: rotate(90deg);
}

.bottom-left {
  bottom: 0;
  left: 0;
  transform: rotate(270deg);
}

.bottom-right {
  bottom: 0;
  right: 0;
  transform: rotate(180deg);
}

@media screen and (max-width: 576px) {
  .login-card {
    width: 90%;
    padding: 30px 24px;
  }

  .login-title {
    font-size: 24px;
  }

  .login-subtitle {
    font-size: 16px;
  }
}
</style>
